<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/base.css">
    <link rel="stylesheet" href="../css/ljlogin.css"> 
    <script src="../js/zepto.js"></script>
</head>
<body>
     <!-- 头部部分 -->
     <div class="header">
        <div class="logo"><img src="../image/index/logo.jpg" alt=""></div>
        <div class="my"><img src="../image/index/my.jpg" alt="">
        <img src="../image/index/xiazai.jpg" alt=""></div>
    </div>
    <div class="zufang">
        <a href="../index.html"><span>首页</span>> 我的 > 登录</a>
    </div>
    <div class="login">
        <div class="login-head">
            <ul>
                <li class="login-bottom">普通登录</li>
                <li>验证码快捷登录</li>
            </ul>
            <!-- <div class="login-pt login-bottom">普通登录</div>
            <div class="login-yzm">验证码快捷登录</div> -->
        </div>
        <div class="login-pt" style="display: block;">
            <div class="findpwd">
                <input type="text" placeholder="请输入手机号码">
            </div>
            <div class="findpwd">
                <input type="text" placeholder="请输入密码">
            </div>
            <div class="button">
                <button>立即登录</button>
            </div>
        </div>
        <div class="login-pt" >
            <div class="findpwd">
                <input type="text" placeholder="请输入手机号码">
                <a href="#"> <i>发送验证码</i> </a>
            </div>
            <div class="findpwd">
                <input type="text" placeholder="请输入密码">
            </div>
            <div class="button">
                <button>验证并登录</button>
            </div>
        </div>
        <div class="register">
            <a href="#">立即注册</a>
            <a href="#"><span>忘记密码</span></a>
        </div>
    </div>
    <script>
        var lis = document.querySelectorAll('li');
        var login = document.querySelectorAll('.login-pt')
        // var login1 = document.querySelector('.login-pt1');
        // var login2 = document.querySelector('.login-pt2')
        for (var i = 0; i < lis.length; i++){
            lis[i].setAttribute('index',i);
            lis[i].onclick = function(){
                for (var i = 0; i < lis.length; i++){
                    lis[i].className = '';
                }
                this.className = 'login-bottom';
                var index = this.getAttribute('index');
                for (var i = 0; i < login.length; i++){
                    login[i].style.display = 'none';
                }
                login[index].style.display = 'block';
            }   
        }
    </script>
</body>
</html>